<template>
	<view>
		<u-empty mode="data" v-if="personList.length==0" text="访客页尚未开发"></u-empty>
		<uni-list :border="false">
			<view class="list-tip">
				仅展示30天内的访客，并访客记录仅自己可见
			</view>
			<!-- 自定义右侧内容 -->
			<uni-list-chat :clickable="true" @click="onOther(item.id)" :avatar-circle="true" :title="item.name" :note="item.date+'查看了你的主页'" :avatar="item.avatar"  :border="false" v-for="item in personList">
				<view class="slot-image" v-if="!item.isFriend">
					<u-button size="mini" text="添加" @click.native.stop="onAddFriend"></u-button>
					<u-icon class="slot-icon" name="arrow-right" color="#000000" size="16"></u-icon>

				</view>
				<view class="slot-image" v-else>
					<u-button text="私聊" @click.native.stop="onChat(item)" size="mini" color="#F82F41"></u-button>
					<u-icon class="slot-icon" name="arrow-right" color="#000000" size="16"></u-icon>
				</view>
			</uni-list-chat>
		</uni-list>
		<u-divider style="margin: 50rpx;" :textSize="12" text="拉到底了哦~"></u-divider>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				personList:[]
			}
		},
		methods: {
			// 添加好友
			onAddFriend(){
				uni.showToast({
					title: '暂时不可添加！',
					icon:"error"
				});
				console.log("添加好友");
			},
			onChat(item){
				uni.navigateTo({
					url: '/pages_sub/user/chat/chat?userId='+item.id,
				});
			},
			onOther(id){
				uni.navigateTo({
					url: '/pages_sub/user/others/others?userId='+id,
				});
			},
		}
	}
</script>

<style lang="scss">
	.list-tip{
		text-align: center;
		font-size: 24rpx;
		margin: 50rpx 0;
	}

	.slot-image {
		font-size: 24rpx;
		line-height: 40rpx;
		color: #999999;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.slot-icon {
		margin-left: 20rpx;
	}
</style>
